import {Text, View, Image, Button, RichText} from '@tarojs/components'
import Taro from '@tarojs/taro';
import {connect} from '@tarojs/redux';
import {AtTabs, AtTabsPane} from 'taro-ui';
import {request, unite} from "../../../utils/index";
import './classroomDetail.scss';
import AddShop from "../../../asset/images/add_shop.png";
import SjIcon from "../../../asset/images/sj_icon.png";
import Address from "../../../asset/images/address_icon.png";
import DtIcon from "../../../asset/images/dt_icon.png";
import Ai from "../../../asset/images/ai.png";
import AiIn from "../../../asset/images/ai_in.png";
import Fb from "../../../asset/images/fb.png";

class ClassroomDetail extends Taro.Component {
    config = {
        navigationBarTitleText: '教室详情',
        navigationBarBackgroundColor: '#ffffff',
        // enablePullDownRefresh: true
    };

    state = {
        classDate: '', //时间
        detailDate: [], //数据接口
        listData: [],

        current: 0,
    };

    temp = {
        loading: false //防止多次点击
    };

    componentDidMount() {
        const {setClassDate} = this.props;
        this.setState({
            classDate: setClassDate
        }, () => {
            this.getDetail();
        })
    };

    getDetail = () => {
        const {classDate} = this.state;
        const params = {
            url: '/wx/firstPage/getRoomDetail',
            data:{
                classDate,
                roomId: this.$router.params.id
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            detailDate: res.data,
                            listData: res.data.hotClasses
                        })
                    }
                }
            }
        })
    };

    //教室收藏 教室收藏
    collect = () => {
        const {detailDate} = this.state;
        if (detailDate.collectionStatus == 0) {
            const params = {
                url: '/wx/collection/save',
                data:{
                    collectionTypeCode: '03', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: detailDate.roomId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('收藏成功');
                        this.getDetail() //获取教室列表
                    }
                }
            })
        } else {
            const params = {
                url: '/wx/collection/deleteById',
                data:{
                    collectionTypeCode: '03', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: detailDate.roomId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('已取消收藏');
                        this.getDetail() //获取教室列表
                    }
                }
            })
        }
    };

    //跳转导航
    skipDaohang = () => {
        const {detailDate} = this.state;
        if (Number(detailDate.latitude) && Number(detailDate.longitude)) {
            Taro.openLocation({
                latitude: Number(detailDate.latitude),
                longitude: Number(detailDate.longitude),
                name: detailDate.roomName,
                address: detailDate.address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    //锚点跳转
    skipPageScro = () => {
        Taro.pageScrollTo({
            selector: '#buyNote',
            duration: 300
        })
    };

    render() {
        const {detailDate, listData, current, classDate} = this.state;
        const option = this.$router.params;
        return (
            <View className="page">
                <View className="course-logo">
                    <Image className="keep-head-img" src={detailDate.avatar}/>
                    <Image className="head-ai" onClick={this.collect} src={detailDate.collectionStatus != 0 ? AiIn : Ai} mode="aspectFit"/>
                    <Button className="head-fb"  open-type="share">
                        <Image className="head-fb-img" src={Fb} onClick={this.onShareAppMessage} mode="aspectFit"/>
                    </Button>
                </View>
                <View className="course-head">
                    <View className="select-items-wrap flex-lr">
                        <View className="items-list items-list-avtive">
                            <View>场馆介绍</View>
                            <View className="heng"></View>
                        </View>
                        <View className="items-list" onClick={this.skipPageScro}>
                            <View>注意事项</View>
                            <View className="heng"></View>
                        </View>
                    </View>
                    <View className="select-gn-wrap">
                        <View className="gn-list flex-lr" onClick={() => {Taro.navigateTo({url: `../classroom-detail-next/classroomDetailNext?id=${option.id}&type=1`})}}>
                            <View className="flex-l">
                                <Image className="icons" src={AddShop} mode="aspectFit"/>
                                <View className="titles">
                                    <View className="text">课程</View>
                                    <View>按次预约，满足燃脂，增肌等需求</View>
                                </View>
                            </View>
                            <View className="arrow"></View>
                        </View>
                        <View className="gn-list flex-lr" onClick={() => {Taro.navigateTo({url: `../classroom-detail-next/classroomDetailNext?id=${option.id}&type=2`})}}>
                            <View className="flex-l">
                                <Image className="icons" src={SjIcon} mode="aspectFit"/>
                                <View className="titles">
                                    <View className="text">教练</View>
                                    <View>动态镜子的教练，为你定制1V1专属训练</View>
                                </View>
                            </View>
                            <View className="arrow"></View>
                        </View>
                        <View className="gn-list gn-list-none flex-lr" onClick={() => {Taro.navigateTo({url: `../classroom-detail-next/classroomDetailNext?id=${option.id}&type=3`})}}>
                            <View className="flex-l">
                                <Image className="icons" src={DtIcon} mode="aspectFit"/>
                                <View className="titles">
                                    <View className="text">门店动态</View>
                                    <View>0距离感受门店训练生活，结交新伙伴</View>
                                </View>
                            </View>
                            <View className="arrow"></View>
                        </View>
                    </View>
                    <View className="select-gn-wrap" onClick={this.skipDaohang}>
                        <View className="gn-list gn-list-none flex-lr">
                            <View className="flex-l">
                                <Image className="icons" src={Address} mode="aspectFit"/>
                                <View className="titles">
                                    <View className="names">门店地址</View>
                                    <View>{detailDate.address}</View>
                                </View>

                            </View>
                            <View className="arrow"></View>
                        </View>
                    </View>
                    <View className="select-detail-wrap">
                        <View className="text">场地简介</View>
                        <View className="title">{detailDate.describeInfo}</View>
                        <View className="text">配套设施</View>
                        <View className="flex-l  pt-wrap">
                            {detailDate.deviceType && detailDate.deviceType.map((item, index) => (
                                <View className="pt-item" key={index}>
                                    <Image className="pt-icon" src={item.picUrl} mode="aspectFit"/>
                                    <View>{item.name}</View>
                                </View>
                            ))}
                        </View>
                        <View className="text" id="buyNote">注意事项</View>
                        <RichText className="title" nodes={detailDate.remark}></RichText>
                    </View>
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {setClassDate, getData} = state;
    return {
        setClassDate,
        getData
    }
};

export default connect(mapStateToProps, null)(ClassroomDetail);

